<template>
	<app-layout>
		<view class="search">
			<view class="prompt dir-left-nowrap main-center cross-center" v-if="search" @click="search = false">
				<image src="../../../static/image/icon/icon-search.png"></image>
				<text>请输入收货人或联系电话搜索</text>
			</view>
			<view v-else style="position: relative">
				<input placeholder="请输入收货人或联系电话搜索" type="text" v-model="keyword" @focus="getFocus=true" focus
					@blur="inputBlur" />
				<image v-if="getFocus && keyword.length" @click.stop="keyword = ''" class="search-clear"
					src="../../../static/image/icon/delete-yuan.png"></image>
			</view>
		</view>

		<view class="head">
			<view v-for="(item, index) in list" :key="index">
				<app-shipping-address @handleAddress="address" :item="item" :is_refund_address="is_refund_address"
					:is_hide_default_btn="is_hide_default_btn == 0" :destroy_url="destroy_url" :edit_url="edit_url"
					:theme="getTheme">
				</app-shipping-address>
			</view>
		</view>
		<!--空格区域-->
		<view class="safe-area-inset-bottom">
			<view class="u-bottom-height"></view>
		</view>
		<view class="safe-area-inset-bottom u-bottom-fixed">
			<view class="app-buttons main-between">
				<app-button :theme="manual_btn_bg" arrangement="row" @click="manual" type="important" round width="702">
					<icon class="app-icon app-manual-icon"></icon>
					<text class="app-text">手动添加</text>
				</app-button>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appShippingAddress from '../../../components/page-component/app-shipping-address/app-shipping-address.vue';
	import {
		mapGetters
	} from "vuex";

	export default {
		name: "address",
		components: {
			'app-shipping-address': appShippingAddress,
		},
		data() {
			return {
				page: 1,
				args: '',
				load: '',
				allList: [],
				manual_btn_bg: '',
				is_refund_address: 0,
				is_hide_default_btn: 0,
				address_url: '',
				destroy_url: '',
				edit_url: '',

				keyword: '',
				search: true,
				getFocus: false,
				getTheme: 'q'
			}
		},
		computed: {
			// ...mapGetters('mallConfig', {
			// 	getTheme: 'getTheme',
			// }),
			list() {
				const allList = this.allList;
				const newVal = this.keyword;
				return allList.filter(item => {
					let regExp = new RegExp(newVal);
					return regExp.test(item.mobile) || regExp.test(item.name);
				})
			},
		},
		onLoad: function(options) {
			this.is_hide_default_btn = options.is_hide_default_btn ? options.is_hide_default_btn : 0;
			this.is_refund_address = options.is_refund_address ? options.is_refund_address : 0;
			this.manual_btn_bg = options.manual_btn_bg ? options.manual_btn_bg : this.getTheme;
			if (this.is_refund_address > 0) {
				this.address_url = this.$apiSol.app_admin.refund_address;
				this.destroy_url = this.$apiSol.app_admin.address_destroy;
				this.edit_url = this.$apiSol.user.address_default;

				uni.setNavigationBarTitle({
					title: '退货地址'
				})
			} else {
				this.address_url = this.$apiSol.user.address;
				this.destroy_url = this.$apiSol.user.address_destroy;
				this.edit_url = this.$apiSol.user.address_default;
			}

			//#ifdef MP-BAIDU
			this.init();
			//#endif
		},
		onShow: function() {
			this.init();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			const self = this;
			if (self.args || self.load)
				return;
			self.load = true;
			let page = self.page + 1;
			this.$request({
				url: self.$apiSol.user.address,
				data: {
					page: page,
				}
			}).then(info => {
				if (info.code === 0) {
					[self.page, self.args, self.allList] = [page, info.data.allList.length === 0, self.allList
						.concat(info.data.list)
					];
				}
				self.load = false;
			});
		},
		methods: {
			inputBlur() {
				let that = this;
				setTimeout(v => {
					that.getFocus = false;
					if (that.keyword === '') that.search = true;
				}, 300)
			},
			init() {
				const self = this;
				if (!self.address_url) return;

				uni.showLoading({
					title: '加载中'
				});
				self.page = 1;
				self.$request({
					url: self.address_url,
				}).then(info => {
					uni.hideLoading();
					if (info.code === 0) {
						[self.page, self.allList] = [1, info.data.list];
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			address() {
				this.init();
			},
			manual() {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/address/address-edit?is_refund_address=' + this.is_refund_address,
				});
			},
			getauto() {
				//#ifndef MP-ALIPAY
				const self = this;
				uni.chooseAddress({
					success: function(e) {
						self.$request({
							url: self.$apiSol.user.wechat_district,
							data: {
								national_code: e.nationalCode,
								province_name: e.provinceName,
								city_name: e.cityName,
								county_name: e.countyName,
							}
						}).then(info => {
							if (info.code === 0) {
								let province_id = info.data.district['province']['id'];
								let city_id = info.data.district['city']['id'];
								let district_id = info.data.district['district']['id'];

								let newAddress = {
									id: '',
									name: e.userName,
									ids: [province_id, city_id, district_id],
									province_id: province_id,
									city_id: city_id,
									district_id: district_id,
									mobile: e.telNumber,
									detail: e.detailInfo,
								};

								uni.navigateTo({
									url: '/plugins/mch_solitaire/address/address-edit?form=' +
										JSON.stringify(
											newAddress) + '&is_refund_address=' + self
										.is_refund_address
								})
							}
						});
					}
				});
				//#endif
			}
		},
	}
</script>
<style scoped lang="scss">
	.head {
		margin-top: #{100rpx};
		background: $uni-weak-color-two;
	}

	.search {
		width: #{750rpx};
		height: #{88rpx};
		padding: #{16rpx} #{24rpx};
		box-sizing: border-box;
		background-color: #efeff4;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

		.prompt {
			width: #{702rpx};
			height: #{56rpx};
			position: absolute;
			border-radius: #{28rpx};
			background-color: #ffffff;

			>image {
				width: #{26rpx};
				height: #{26rpx};
			}

			>text {
				color: #b2b2b2;
				font-size: #{26rpx};
				margin: #{0 10rpx};
			}
		}

		input {
			width: #{702rpx};
			height: #{56rpx};
			border-radius: #{28rpx};
			background-color: #ffffff;
			padding: #{0 70rpx 0 30rpx};
			box-sizing: border-box;
			font-size: #{26rpx};
		}

		.search-clear {
			position: absolute;
			right: #{15rpx};
			top: #{14rpx};
			width: #{30rpx};
			height: #{30rpx};
			z-index: 300;
		}
	}

	.app-buttons {
		height: 128upx;
		padding: 24upx 24upx;

		.app-icon {
			width: #{32rpx};
			height: #{32rpx};
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-right: #{8rpx};
		}

		.app-manual-icon {
			background-image: url("../../../static/image/icon/add.png");
		}

		/* .app-auth-icon {
			background-image: url("./image/auth.png");
		} */

		.app-text {
			font-size: #{28rpx};
			color: #ffffff;
			margin-left: #{8rpx};
		}
	}

	.u-bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1500;
	}

	.u-bottom-height {
		height: 128upx;
	}
</style>
